<template>
  <header class="header">
    <div class="logo-container">
      <img src="/public/images/logo.png" alt="Logo" class="logo">
      <h1>双碳招投标网</h1>
    </div>
    <nav class="nav-menu">
      <router-link to="/">首页</router-link>
      <router-link to="/news">平台动态</router-link>
      <router-link to="/policy">政策法规</router-link>
      <router-link to="/complaint">违规投诉</router-link>
    </nav>
    <div class="user-info" @click="goToPersonalCenter">
      <el-avatar :size="40" src="/images/pic5.png" />
      <span class="company-name">{{ userInfo.company || 'admin' }}</span>
    </div>
  </header>
</template>

<script>
export default {
  name: 'Header',
  data() {
    return {
      userInfo: {
        username: 'admin',
        company: '企业机构',
        phone: '15610565780'
        // 可以从Vuex或API获取实际用户数据
      }
    }
  },
  methods: {
    goToPersonalCenter() {
      this.$router.push('/user/center')
    }
  }
}
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.logo-container {
  display: flex;
  align-items: center;
}

.logo {
  height: 40px;
  margin-right: 10px;
}

.nav-menu {
  display: flex;
  gap: 20px;
}

.nav-menu a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
}

.nav-menu a.router-link-exact-active {
  color: #409EFF;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.user-info:hover {
  background-color: #f5f5f5;
}

.company-name {
  font-weight: 500;
}
</style>